<template>
    <el-table :data="items" stripe border class="item-el-table">
        <el-table-column prop="stockName" label="商品名" width="140"/>
        <el-table-column prop="stockSpecification" label="商品规格" width="180"/>
        <el-table-column prop="stockType" label="商品类型" width="180"/>
        <el-table-column prop="stockNum" label="商品数量" width="100"/>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="addItem(scope.row.stockId)">添加</el-button>
                <el-button type="primary" size="small" @click="seeItem(scope.row.stockId)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>

    import {mapActions, mapMutations, mapState} from "vuex";

    export default {
        computed: {
            ...mapState("item", ["items"]),
        },
        methods: {
            ...mapMutations("item", []),
            ...mapActions("item", ["listItems"]),
            seeItem(stockId) {
                //设置查看页面可见
                this.setselectItemVisible(true);
               console.log(2222222222222)
                this.findByItem(stockId);
            },
            async addItem(stockId) {
                //设置添加页面可见
                await this.findByItem(stockId);
                console.log(2222222222222)
                this.setAddItemVisible(true);
            },
            ...mapMutations("item", ["setselectItemVisible","setAddItemVisible", "setItem"]),
            ...mapActions("item", ["listItems", "findByItem"]),
        },
        //渲染前执行显示所有方法
        created() {
            this.listItems();
        },
    };
</script>

<style>
</style>
